import React, { useEffect, useState } from 'react'
import { Menu, Card } from "antd";
import SendCardForm from "./Card/SendCardForm";
import { getManageCard } from "./service";

const ManagementCard = () => {

    const [selectedKeys, setSelectedKeys] = useState(['总卡'])





    useEffect(() => {

        getManageCard().then(res => {
            console.log(res.data)
            let arr1 = []
            let arr2 = []
            let arr3 = []
            let arr4 = []
            res.data.forEach((item) => {
                if (item.card_name.indexOf("总卡") !== -1) {
                    arr1.push(item)
                    arr4.push({
                        label: item.card_name,
                        value: item.card_number
                    })
                }
                if (item.card_name.indexOf("授权卡") !== -1) {
                    arr2.push(item)
                }
                if (item.card_name.indexOf("绑定卡") !== -1) {
                    arr3.push(item)
                }
            })
            SetTotalList(arr1)
            SetAuthorizationList(arr2)
            SetBindingList(arr3)
            setList(arr4)
        })
    }, [])

    const [TotalList, SetTotalList] = useState([])
    const [AuthorizationList, SetAuthorizationList] = useState([])
    const [BindingList, SetBindingList] = useState([])

    const [List, setList] = useState([])

    const items = [
        { key: '总卡', label: '总卡' },
        { key: '授权卡', label: '授权卡' },
        { key: '绑定卡', label: '绑定卡' },
    ];

    return (
        <div style={{ display: 'flex', alignItems: 'center' }}>

            <div style={{ width: 200 }}>
                <Menu
                    mode="inline"
                    selectedKeys={selectedKeys}
                    style={{ border: 'none', height: "calc(92vh - 100px)" }}
                    onSelect={({ selectedKeys }) => {

                        setSelectedKeys(selectedKeys)
                        console.log(selectedKeys[0])
                        switch (selectedKeys[0]) {
                            case '总卡':
                                let arr = []
                                TotalList.forEach((item) => {
                                   
                                    arr.push({
                                        label: item.card_name,
                                        value: item.card_number
                                    })
                                })
                                setList(arr)
                                
                                break
                            case '授权卡':
                                console.log(AuthorizationList)
                                let arr1 = []
                                AuthorizationList.forEach((item) => {
                                     
                                    arr1.push({
                                        label: item.card_name,
                                        value: item.card_number
                                    })
                                })
                                setList(arr1)
                               
                                break
                            case '绑定卡':
                                  console.log(2)
                                let arr2 = []
                                BindingList.forEach((item) => {
                                    arr2.push({
                                        label: item.card_name,
                                        value: item.card_number
                                    })
                                })
                                setList(arr2)
                                
                        }
                    }}
                    items={items}
                >
                </Menu>
            </div>

            <Card style={{ width: "calc(90vw - 200px)", height: "calc(92vh - 100px)", marginLeft: 10 }}>
                {
                    List.length ? <SendCardForm List={List} TotalList={TotalList} AuthorizationList={AuthorizationList} BindingList={BindingList} selectedKeys={selectedKeys} />:""
                }
            </Card>
        </div>
    )
}

export default ManagementCard